<template>
 <div id="DetailNavbar">
     <navbar>
         <template #left> <img src="../../../assets/img/common/back.svg" alt="" @click="backClick"> </template>
         <template #center >
             <span :class="{active:index===currentIdex}" v-for="(item, index) in titles" :key="index" @click="itemClick(index) ">{{item}}</span>
         </template>
     </navbar>
 </div>
</template>

<script>
import Navbar from "../../../components/common/navbar/navbar.vue"
export default {
name:"DetailNavbar",
data(){
   return{
       currentIdex:0,
       titles:["商品","参数","评论","推荐"],
   }
},
components:{
    Navbar
},
methods: {
    backClick(){
        this.$router.back();
    },
    itemClick(index){
        this.currentIdex=index;
        this.$emit("tabClick",index)
      
    }
},
}
</script>

<style scoped>
#DetailNavbar{
    font-size: 15px;
    text-align: center;
}
.navbar{
    background-color: #fff !important;
}
.left {
    float: left; 
}
.left img{
    vertical-align: middle;
    padding-left: 20px;
}
.center{
    /* background-color: #fff;
    border-bottom: 1px solid #ccc9c9bd; */
}
.center span{
    padding: 0 20px;
    color: #2f2f2f;
}
.active{
    color: #ff6699 !important;
}

</style>